$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + "sys/orBanner/list",
        datatype: "json",
        colModel: [
            {label: '轮播图id', name: 'bannerId', width: 20, align: 'center', sortable: false},
            {
                label: '状态',
                name: 'state',
                width: 20,
                align: 'center',
                sortable: false,
                formatter: function (value, options, row) {
                    return value == 1 ? "展示中" : "隐藏";
                }
            },
            {
                label: '类型',
                name: 'type',
                width: 25,
                align: 'center',
                sortable: false,
                formatter: function (value, options, row) {
                    return value == 1 ? "顶部轮播图" : value == 2 ? "底部轮播图" : "四格图";
                }
            },
            {
                label: '类型',
                name: 'jumpType',
                width: 25,
                align: 'center',
                sortable: false,
                formatter: function (value, options, row) {
                    return value == 0 ? "不跳转" : value == 1 ? "链接直跳" : "获取内容";
                }
            },
            {label: '标题', name: 'title', width: 30, align: 'center'},
            {
                label: '轮播图',
                name: 'imgUrl',
                width: 30,
                align: 'center',
                sortable: false,
                formatter: function (value, options, row) {
                    return value == null || value.length == 0 ? '-' : '<a  onclick ="openCur(' + JSON.stringify(row).replace(/"/g, '&quot;') + ')"> 轮播预览 </a>';
                }
            },
            {label: '跳转地址', name: 'jumpUrl', width: 120, align: 'center'},
            {
                label: '内容',
                name: 'content',
                width: 100,
                align: 'center',
                sortable: false,
                formatter: function (value, options, row) {
                    return value == null || value.length == 0 ? '-' : '<a  onclick ="openContent(' + JSON.stringify(row).replace(/"/g, '&quot;') + ')"> 内容预览 </a>';
                }
            },
            {label: '顺序', name: 'sort', width: 60, align: 'center', sortable: false}

        ],
        viewrecords: true,
        height: 375,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        multiboxonly: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });
    vm.initTypes();

});

var ue = UE.getEditor('editor');

var vm = new Vue({
    el: '#rrapp',
    data: {
        q: {
            type: 0,
            state: 0
        },
        showList: true,
        showUpdate: false,
        title: null,
        banner: {
            bannerId: null,
            sort: null,
            type: 0,
            state: 0,
            content: null,
            title: null,
            jumpUrl: null,
            imgUrl: null,
            jumpType: 0
        },
        states: [
            {
                value: 0,
                msg: "请选择"
            }
            , {
                value: 1,
                msg: "展示"
            }, {
                value: 2,
                msg: "隐藏"
            }
        ],
        types: [],
        jumpTypes: [
            {
                value: 0,
                msg: '跳转方式'
            },
            {
                value: 1,
                msg: '链接直跳'
            },
            {
                value: 2,
                msg: '获取内容'
            }
        ],

    },
    methods: {
        query: function () {
            vm.reload();
        },
        clean: function () {
            vm.showList = true;
            vm.showUpdate = false;
            vm.q = {
                state: 0,
                type: 0
            };
            vm.reload();
        },
        update: function () {
            var rowid = getSelectedRow();
            if (rowid == null) {
                return;
            }
            var row = $("#jqGrid").jqGrid('getRowData', rowid);
            if (rowid == null) {
                return;
            }
            let bannerId = row.bannerId;
            vm.showList = false;
            vm.showUpdate = true;
            vm.title = "修改";

            $.get(baseURL + "sys/orBanner/findById/" + bannerId, result => {
                vm.banner = result.banner
                console.log(result.banner)
                if (result.banner.jumpType == 2) {
                    ue.setContent(result.banner.content)
                }
            })
        },
        modify: function () {
            if (vm.banner.bannerId == null || vm.banner.bannerId == '') {
                vm.insert();
                return;
            }
            //为图片添加宽度自适应
            if (vm.banner.jumpType == 2) {
                let content = ue.getContent();
                if (content != null && content.length != 0) {
                    content = content.replace("<img", "<img width='100%' height='auto'");
                    vm.banner.content = content;
                }
            }

            let bannerEls = $("#bannerImg").val();
            if (bannerEls == null || bannerEls == '') {
                vm.commitUpdate();
            } else {
                var formData = new FormData($("form")[1]);
                formData.append("file", $("#bannerImg")[0]);
                $.ajax({
                    url: baseURL + "sys/orBanner/uploadBanner",
                    datatype: 'json',
                    type: 'post',
                    data: formData,
                    cache: false,
                    traditional: true,
                    contentType: false,
                    processData: false,
                    success: function (msg) {
                        if (msg.url != null && msg.url != '') {
                            vm.banner.imgUrl = msg.url;
                            vm.commitUpdate();
                        }
                    }

                })


            }

        },
        reload: function () {
            vm.showList = true;
            vm.showUpdate = false;
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    'type': vm.q.type,
                    'state': vm.q.state
                },
                page: 1
            }).trigger("reloadGrid");
            ue.setContent("");
        },
        commitUpdate: function () {

            $.ajax({
                url: baseURL + "sys/orBanner/update",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(vm.banner),
                success: function (r) {
                    if (r.code == 0) {
                        alert(r.msg);
                        vm.reload();
                    } else {
                        alert(r.msg)
                    }
                }
            })
        },
        add: function () {
            vm.showList = false;
            vm.showUpdate = true;
            vm.banner = {
                bannerId: null,
                sort: null,
                type: 0,
                state: 0,
                content: null,
                title: null,
                jumpUrl: null,
                imgUrl: null,
                jumpType: 0
            };
            ue.setContent("");
            $("#bannerImg").val("");
            vm.title = "新赠";
        },
        insert: function () {
            let bannerEls = $("#bannerImg").val();
            var formData = new FormData($("form")[1]);
            formData.append("file", $("#bannerImg")[0]);
            if (bannerEls == null || bannerEls == '') {
                layer.msg("请选择轮播图");
                return;
            }
            if (vm.banner.title == 0) {
                layer.msg("请填写标题");
                return;
            }
            if (vm.banner.type == 0) {
                layer.msg("请选择类型");
                return;
            }
            if (vm.banner.state == 0) {
                layer.msg("请选择状态");
                return;
            }
            //为图片添加宽度自适应
            if (vm.banner.jumpType == 2) {
                let content = ue.getContent();
                if (content != null && content.length != 0) {
                    content = content.replace("<img", "<img width='100%' height='auto'");
                    vm.banner.content = content;
                }
            }

            $.ajax({
                url: baseURL + "sys/orBanner/uploadBanner",
                datatype: 'json',
                type: 'post',
                data: formData,
                cache: false,
                traditional: true,
                contentType: false,
                processData: false,
                success: function (msg) {
                    console.log(msg.url);
                    if (msg.url != null && msg.url != '') {
                        vm.banner.imgUrl = msg.url;
                        $.ajax({
                            url: baseURL + "sys/orBanner/insert",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(vm.banner),
                            success: function (r) {
                                if (r.code == 0) {
                                    alert(r.msg);
                                    vm.reload();
                                } else {
                                    alert(r.msg)
                                }
                                ue.setContent("");
                            }
                        })
                    }
                }

            })


        }, initTypes() {
            $.get(baseURL + "sys/discoverImg/getTypes/" + 1, r => {
                vm.$set(vm.types, 0, {
                    type: "0",
                    name: "类型选择"
                })
                for (let i = 0; i < r.types.length; i++) {
                    vm.$set(vm.types, (i + 1), r.types[i])
                }
            })
        }


    }
});

//加载轮播图
function openCur(row) {
    $("#bannerContent").html("");
    var carouselDiv = "";
    carouselDiv += "<div><img src=" + row.imgUrl + " width=\"100%\" height=\"100%\"></div>";
    $("#bannerContent").append(carouselDiv);
    layui.use('carousel', function () {
        let carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#goodBanner'
            , width: '1125px' //设置容器宽度
            , height: '630px'
            , arrow: 'always' //始终显示箭头
            , anim: 'default' //切换动画方式
            , autoplay: true
        });
    });
    open();
}

//打开轮播图
function open() {
    layer.open({
        type: 1,
        title: "轮播图预览",
        content: $("#goodBanner"),
        btn: ['确定'],
        area: ['auto'],
        btn1: function (index) {
            $("#bannerContent").html("");
            layer.close(index);
        }

    })

}

//弹窗显示内容
function openContent(row) {
    $("#content").html(row.content);
    layer.open({
        type: 1,
        title: "内容预览",
        content: $("#content"),
        btn: ['确定'],
        area: ['392px', '716px'],
        btn1: function (index) {
            $("#content").html("");
            layer.close(index);
        }

    })

}